<template>
    <!-- 仪表盘 -->
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '600px', width: '100%'}">
            <div class="chart" ref="chart" :style="{height:'100%',width:'100%'}"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartGauge2',
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    text: '仪表盘',
                    left: 'center'
                },
                tooltip: {
                    formatter: "{a} <br />{c} : {b}" //a系列名称 b数据项名称 c数值
                },
                series: [
                    {
                        name: '速度',
                        type: 'gauge',
                        z: 3,
                        min: 0,
                        max: 220,
                        splitNumber: 11,
                        radius: '50%',
                        axisLine: {  //坐标轴线
                            lineStyle: {  //属性lineStyle控制线条样式
                                width: 10
                            }
                        },
                        axisTick: {  //坐标轴小标记
                            length: 15, //属性length控制线长
                            lineStyle: { //属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {  //分割线
                            length: 20, //属性length控制线长
                            lineStyle: { 
                                color: 'auto'
                            }
                        },
                        title: {
                            textStyle: {  //其余属性默认使用全局文本样式， 详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 20,
                                fontStyle: 'italic'
                            }
                        },
                        detail: {
                            textStyle: { //其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder'
                            }
                        },
                        data: [{value: 40, name: 'km/h'}]
                    },
                    {
                        name: '转速',
                        type: 'gauge',
                        center: ['20%', '55%'],  //默认全局居中
                        radius: '35%',
                        min: 0,
                        max: 7,
                        endAngle: 45,
                        splitNumber: 7,
                        axisLine: {  //坐标轴线
                            lineStyle: { //属性lineStyle控制线条样式
                                width: 8
                            }
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: 'auto'
                            }
                        },
                        splitLine: {
                            length: 20,
                            lineStyle: {
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 5
                        },
                        title: {
                            offsetCenter: [0, '-30%'] //left,top单位px
                        },
                        details: {
                            textStyle: {
                                fontWeight: 'bolder'
                            }
                        },
                        data: [{
                            value: 1.5,
                            name: 'x1000 /min'
                        }]
                    },
                    {
                        name: '油表',
                        type: 'gauge',
                        center: ['77%', '50%'], //默认全局居中
                        radius: '25%',
                        min: 0,
                        max: 2,
                        startAngle: 135,
                        endAngle: 45,
                        splitNumber: 2,
                        axisLine: {
                            lineStyle: {
                                width: 8
                            }
                        },
                        axisTick: {
                            splitNumber: 5,
                            length: 10,
                            lineStyle: {
                                color: 'auto'
                            }
                        },
                        axisLabel: {
                            formatter: function(v) {
                                switch (v + '') {
                                    case '0': return 'E'
                                    case '1': return 'Gas'
                                    case '2': return 'F'
                                }
                            }
                        },
                        splitLine: {
                            length: 15,
                            lineStyle: {
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 2
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [{value: 0.5, name: 'gas'}]
                    },
                    {
                        name: '水表',
                        type: 'gauge',
                        center: ['77%', '50%'], //默认全局居中
                        radius: '25%',
                        min: 0,
                        max: 2,
                        startAngle: 315,
                        endAngle: 225,
                        splitNumber: 2,
                        axisLine: {
                            lineStyle: {
                                width: 8
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            formatter: function(v) {
                                switch (v + '') {
                                    case '0': return 'H'
                                    case '1': return 'Water'
                                    case '2': return 'C'
                                }
                            }
                        },
                        splitLine: {
                            length: 15,
                            lineStyle: {
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 2
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [{value: 0.5, name: 'gas'}]
                    }
                ]
            });
        }
    }
}
</script>